import { useEffect, useState } from "react";
import api from "../../api/request";
import Header from "../../componets/Header";

import st from "./vipBirth.module.css";
import Search from "../../componets/Search";
import CommonTabs from "../../componets/CommonTabs";
import UserItem from "../../componets/UserItem";
const VipBirthdayList = () => {
  const [data, setData]: [data: {}[], setData: any] = useState([]);
  const [select, setSelect]: [select: string[], setSelect: any] = useState([]);
  useEffect(() => {
    api.post(`/me-api/birthday`).then((res) => {
      console.log(res);
      setData(res.data.data);
    });
  }, []);

  const onSelect = (id: string) => {
    // 列表中存在就删除
    if (select.find((item: string) => item === id)) {
      setSelect(select.filter((item) => item !== id));
    } else {
      // 列表中不存在就添加
      setSelect([...select, id]);
    }
  };
  console.log(select)
  // onClick={() => setCurrentPage((prev) => prev + 1)}
  return (
    <div className={st.container}>
      <Header leftIcon={true}>会员生日关怀</Header>
      <Search></Search>
      <CommonTabs
        config={[
          { id: 0, text: "全部" },
          { id: 1, text: "今天" },
          { id: 2, text: "1天" },
          { id: 3, text: "2天" },
          { id: 4, text: "3天" },
          { id: 5, text: "4天" },
          { id: 6, text: "5天" },
          { id: 7, text: "6天" },
          { id: 8, text: "7天" },
          { id: 9, text: "8天" },
        ]}
      />
      <div className={st.birthlist}>
        {data.map((item: any) => (
          <UserItem
            item={item}
            key={item.id}
            onSelect={onSelect}
            select={select}
            isBirth={true}
          />
        ))}
      </div>
      {/* 放footer 有全选 */}
      <SendGiftFooter select={select} data={data} setSelect={setSelect} />
    </div>
  );
};

// footer组件
const SendGiftFooter = ({ select, data, setSelect }: any) => {
  // 点击全选
  const selectAllHandler = () => {
    if (select.length === data.length) {
      setSelect([]);
      return;
    }
    if (data) {
      const idList: string[] = [];
      data.forEach((item: any) => {
        idList.push(item.id);
      });
      setSelect(idList);
    }
  };
  return (
    <div className={st.sendBox}>
      <div
        className={`${st.checkBox} ${
          select.length == data.length ? st.select : ""
        }`}
        onClick={() => selectAllHandler()}
      ></div>
      <span className={st.unit}>已选（{select.length}人）</span>
      <div className={st.sendBtn}>送礼</div>
    </div>
  );
};
export default VipBirthdayList;
